<template>
  <div>
    <el-row>
      <el-col :span="15" style="padding-right: 10px">
        <el-form :model="queryForm" ref="queryRef" label-width="90">
          <el-row>
            <el-col :span="7">
              <el-form-item label="选择时间段：">
                <el-date-picker
                  v-model="queryForm.dateRange"
                  value-format="YYYY-MM-DD"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="检测类型：">
                <el-select
                  v-model="queryForm.a"
                  style="width: 100%"
                  placeholder="请选择检测类型"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in tempList"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="委托单位：">
                <el-select
                  v-model="queryForm.b"
                  style="width: 100%"
                  placeholder="请选择委托单位"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in tempList"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="点位名称：">
                <el-select
                  v-model="queryForm.c"
                  style="width: 100%"
                  placeholder="请选择点位名称"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in tempList"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所在区域：">
                <City :id="'right'" ref="wtAreaRef" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="受检单位：">
                <el-select
                  v-model="queryForm.d"
                  style="width: 100%"
                  placeholder="请选择受检单位"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in tempList"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div
          :style="'height:' + height + 'px'"
          style="width: 100%"
          id="container"
        ></div>
      </el-col>
      <el-col
        :span="9"
        style="border-left: 2px #e5e5e5 solid; padding-left: 10px"
      >
        <el-tabs v-model="activityName" @tab-change="tabChange">
          <el-tab-pane label="定检测项目统计" name="first">
            <div v-if="activityName == 'first'">
              <p class="pinformation">统计规则</p>
              <el-row>
                <el-col :span="10">
                  <el-form-item label="检测项目：">
                    <el-select
                      v-model="queryForm.e"
                      style="width: 100%"
                      placeholder="请选择检测项目"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in tempList"
                        :key="item.value"
                        :value="item.value"
                        :label="item.label"
                      >
                      <span v-html="proxy.getSupAndSub(item.label)"></span>
            </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="14">
                  <el-form-item label="频次取值：" label-width="80">
                    <el-radio-group v-model="queryForm.f">
                      <el-row>
                        <el-col :span="7">
                          <el-radio label="0">取均值</el-radio>
                        </el-col>
                        <el-col :span="12">
                          <el-radio label="1">
                            <el-row>
                              <el-col :span="10">每天第</el-col>
                              <el-col :span="10">
                                <el-input v-model="queryForm.g"></el-input
                              ></el-col>
                              <el-col :span="4">次</el-col>
                            </el-row>
                          </el-radio>
                        </el-col>
                      </el-row>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <p class="pinformation">柱状图统计</p>
              <div style="width: 100%; height: 280px" id="chart"></div>
              <el-row style="justify-content: space-between">
                <el-row>
                  <p class="pinformation">列表统计</p>
                  <span class="totalStyle">共{{ tjList.length }}条数据</span>
                </el-row>
                <el-row style="padding-bottom: 5px">
                  <el-button link>导出统计表</el-button>
                </el-row>
              </el-row>
              <el-table :data="tjList" :height="'35vh'">
                <el-table-column
                  label="点位名称"
                  align="center"
                  prop="pointName"
                />
                <el-table-column
                  label="检测结果"
                  align="center"
                  prop="methodna"
                />
                <el-table-column label="单位" align="center" prop="unitName" />
                <el-table-column label="检查时间" align="center" prop="time" />
                <el-table-column label="频次" align="center" prop="pc" />
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="定点位统计" name="second">
            <div v-if="activityName == 'second'">
              <el-row>
                <p class="pinformation" style="margin-top: 9px">统计规则</p>
                <el-form-item label="受检单位：" label-width="80">
                  齐鲁石化第三分公司
                </el-form-item>
              </el-row>
              <el-row>
                <el-col :span="14">
                  <el-form-item label="点位名称：">
                    <el-select
                      v-model="queryForm.h"
                      style="width: 100%"
                      placeholder="请选择点位名称"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in tempList"
                        :key="item.value"
                        :value="item.value"
                        :label="item.label"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="检测项目：" label-width="80">
                    <el-select
                      v-model="queryForm.i"
                      style="width: 100%"
                      placeholder="请选择检测项目"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in tempList"
                        :key="item.value"
                        :value="item.value"
                        :label="item.label"
                      >
                      <span v-html="proxy.getSupAndSub(item.label)"></span>
            </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="频次取值：">
                <el-radio-group v-model="queryForm.j">
                  <el-row>
                    <el-col :span="7">
                      <el-radio label="0">取均值</el-radio>
                    </el-col>
                    <el-col :span="12">
                      <el-radio label="1">
                        <el-row>
                          <el-col :span="10">每天第</el-col>
                          <el-col :span="10">
                            <el-input v-model="queryForm.k"></el-input
                          ></el-col>
                          <el-col :span="4">次</el-col>
                        </el-row>
                      </el-radio>
                    </el-col>
                  </el-row>
                </el-radio-group>
              </el-form-item>
              <p class="pinformation">折线图统计</p>
              <div style="width: 100%; height: 220px" id="chart1"></div>
              <el-row style="justify-content: space-between">
                <el-row>
                  <p class="pinformation">列表统计</p>
                  <span class="totalStyle">共{{ tjList.length }}条数据</span>
                </el-row>
                <el-row style="padding-bottom: 5px">
                  <el-button link>导出统计表</el-button>
                </el-row>
              </el-row>
              <el-table :data="tjList" :height="'35vh'">
                <el-table-column
                  label="点位名称"
                  align="center"
                  prop="pointName"
                />
                <el-table-column
                  label="检测结果"
                  align="center"
                  prop="methodna"
                />
                <el-table-column label="单位" align="center" prop="unitName" />
                <el-table-column label="检查时间" align="center" prop="time" />
                <el-table-column label="频次" align="center" prop="pc" />
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import City from "@/components/City/index.vue";
import * as echarts from "echarts";
import markerPng from "@/assets/images/marker.png";

const { proxy } = getCurrentInstance()
const queryForm = ref({});
const tempList = ref([{ label: "暂无", value: 1 }]);
const height = ref(100);
const activityName = ref("");
const tjList = ref([]);
const myChart = ref();
const myChart1 = ref();

var map = null;
function getMap() {
  map = new T.Map("container");
  var lnglat = new T.LngLat(117.00005, 36.659565);
  map.centerAndZoom(lnglat, 12);
  var res = [
    { lng: 116.95065, lat: 36.699565, pointName: "无" },
    { lng: 116.90065, lat: 36.649565, pointName: "无" },
    { lng: 117.00065, lat: 36.599565, pointName: "无" },
    { lng: 117.08065, lat: 36.609565, pointName: "无" },
    { lng: 117.07065, lat: 36.709565, pointName: "无" },
    { lng: 117.05065, lat: 36.629565, pointName: "无" },
    { lng: 116.96065, lat: 36.639565, pointName: "无" },
  ];
  res.forEach((item) => {
    handleMapView(item.lng, item.lat, item.pointName);
  });
}

function handleMapView(lng, lat, point1) {
  var marker = new T.Marker(new T.LngLat(lng, lat));
  var label = new T.Label({
    text: point1,
    position: new T.LngLat(lng, lat),
    offset: new T.Point(0, -20),
  });
  map.addOverLay(label);
  map.addOverLay(marker); // 将标注添加到地图中
  marker.setIcon(
    new T.Icon({
      iconUrl: markerPng,
      iconSize: new T.Point(32, 32),
      iconAnchor: new T.Point(16, 32),
    })
  ); // 设置标记点的图标、尺寸和锚点偏移量
}

function getHeight() {
  var box = document.getElementById("container");
  var boxDistanceFromTop = box.getBoundingClientRect().top;
  height.value = window.innerHeight - boxDistanceFromTop - 21;
}

function gain() {
  var option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {},
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: [
          "睦里庄",
          "三孔桥",
          "北苑路",
          "大珊栏",
          "1水库",
          "中央路",
          "八马路",
          "经十路",
          "纬二路",
          "三全路",
          "银河路",
          "支部路",
        ],
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "最小值",
        type: "bar",
        stack: "Ad",
        emphasis: {
          focus: "series",
        },
        data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90],
      },
      {
        name: "均值",
        type: "bar",
        stack: "Ad",
        emphasis: {
          focus: "series",
        },
        data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290],
      },
      {
        name: "最大值",
        type: "bar",
        stack: "Ad",
        emphasis: {
          focus: "series",
        },
        data: [150, 232, 201, 154, 190, 330, 410, 220, 182, 191, 234, 290],
      },
    ],
  };
  myChart.value.setOption(option);
}

function gain1() {
  var option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["总磷", "总氮"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
    },
    yAxis: [
      {
        type: "value",
        name: "mg/L",
        min: 0,
        max: 1000,
        interval: 200.0,
      },
    ],
    series: [
      {
        name: "总磷",
        type: "line",
        data: [120, 232, 101, 234, 120, 330, 810, 100, 953, 226, 554, 440],
      },
      {
        name: "总氮",
        type: "line",
        data: [550, 234, 232, 330, 810, 100, 120, 556, 458, 752, 210, 435],
      },
    ],
  };
  myChart1.value.setOption(option);
}

function tabChange(name) {
  nextTick(() => {
    if (name === "first") {
      myChart.value = markRaw(echarts.init(document.getElementById("chart")));
      gain();
    } else {
      myChart1.value = markRaw(echarts.init(document.getElementById("chart1")));
      gain1();
    }
  });
}

onMounted(() => {
  nextTick(function () {
    getHeight();
    window.addEventListener("resize", getHeight);
    activityName.value = "first"
    nextTick((res) => {
      getMap()
    })
  });
})

onUpdated(() => {
  nextTick(() => {
    getHeight();
    activityName.value = "first";
    nextTick(() => {
      getMap();
    });
  });
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", getHeight);
});
</script>
